import { useEffect } from 'react';
import { motion } from 'framer-motion';
import ImageThumbnail from '@/components/ImageThumbnail';
import { imageData } from '@/mocks/imageData';
import { toast } from 'sonner';

export default function Home() {
  // 页面加载时显示欢迎提示
  useEffect(() => {
    toast.info('欢迎使用英语口语训练系统，请选择一个场景开始练习');
  }, []);

  return (
    <div className="min-h-screen bg-gradient-to-b from-blue-50 to-white py-12 px-4 sm:px-6 lg:px-8">
      <div className="max-w-7xl mx-auto">
        {/* 页面标题 */}
        <motion.div 
          initial={{ opacity: 0, y: -20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.5 }}
        >
          <h1 className="text-4xl font-bold text-center text-gray-900 mb-2">英语口语训练场景</h1>
          <p className="text-center text-gray-600 max-w-2xl mx-auto">
            选择以下场景进行英语口语练习，每个场景都包含背景描述、重点词汇和对话练习
          </p>
        </motion.div>
        
        {/* 图片网格 */}
        <div className="mt-12 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
          {imageData.map((image) => (
            <ImageThumbnail key={image.id} image={image} />
          ))}
        </div>
        
        {/* 说明卡片 */}
        <motion.div
          className="mt-12 rounded-xl bg-blue-50 p-6 shadow-sm"
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          transition={{ delay: 0.3, duration: 0.5 }}
        >
          <div className="flex items-start">
            <div className="flex-shrink-0 bg-blue-100 p-2 rounded-full">
              <i className="fa-solid fa-info text-blue-600"></i>
            </div>
            <div className="ml-4">
              <h3 className="text-lg font-medium text-gray-900">如何使用</h3>
              <p className="mt-1 text-gray-600">
                点击任意场景图片进入详情页面，查看背景描述、重点词汇和对话示例。
                您可以根据场景内容进行角色扮演练习，提高英语口语能力。
              </p>
            </div>
          </div>
        </motion.div>
      </div>
    </div>
  );
}